<template>
  <div :class="className" @click="$emit('click')">
    <div class="article-card__content">
      <span class="article-card-title">{{ title }}</span>
      <div class="article-card-subtitle">
        <span class="subtitle-topic">{{ tags }}</span>
        <span class="subtitle-date">{{ createTime }}</span>
      </div>
    </div>
    <div class="article-card__img">
      <upload-video v-if="isVideo" :value="[headUrl]" :editable="false" />
      <img v-else class="article-card-img" :src="headUrl" />
    </div>
  </div>
</template>

<script>
import UploadVideo from "@/components/UploadVideo";

export default {
  components: {
    UploadVideo
  },
  inheritAttrs: false,
  props: {
    title: {
      type: String,
      required: true
    },
    tags: {
      type: String,
      default: ""
    },
    createTime: {
      type: String,
      default: ""
    },
    headUrl: {
      type: String,
      default: ""
    },
    size: {
      type: String,
      default: "small"
    }
  },
  computed: {
    className() {
      return ["article-card", `article-card--${this.size}`];
    },
    isVideo() {
      return (this.headUrl || "").indexOf("?video") > -1;
    }
  }
};
</script>

<style lang="less">
.article-card {
  display: flex;
  align-items: center;
  padding: 25px 0;
  box-shadow: inset 0px -2px 0px 0px #f5f5f5;
  &-title {
    height: 84px;
    font-size: 32px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 42px;
    .rows-ellipsis();
  }

  &-subtitle {
    font-size: 24px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    line-height: 30px;
    margin-top: 8px;
    display: flex;
    align-items: center;

    span + span {
      margin-left: 20px;
    }

    .subtitle-topic {
      .rows-ellipsis(1);
    }
    .subtitle-date {
      flex-shrink: 0;
    }
  }

  &__content {
    flex: 1;
  }

  &__img {
    flex-shrink: 0;
    width: 220px;
    height: 140px;
    border-radius: 16px;
    margin-left: 20px;
    overflow: hidden;

    img {
      height: 100%;
      width: 100%;
    }
  }

  &--large {
    display: block;
    box-shadow: none;

    .article-card-title {
      height: auto;
    }

    .article-card__img {
      margin-left: 0;
      margin-top: 18px;
      width: 100%;
      height: 330px;
    }
  }
}
</style>
